<script setup lang="ts">
import {ElementPlus, Paperclip, Promotion} from "@element-plus/icons-vue";
import {FilesCard,MentionSender} from "vue-element-plus-x";
import {MentionOption} from "vue-element-plus-x/types/components/MentionSender/types";
import FileUploadBatch from "./file-upload-batch.vue";
import {ChatInputDTO} from "@/views/ai/agent/x6/com/types";
import {clearByKeys} from "@/views/ai/agent/x6/utils";

const emits = defineEmits<{
  (e:'query',v:ChatInputDTO):void;
}>();
const dto=ref<ChatInputDTO>({})
const isSelect=ref(false)

const showHeaderFlog=ref(false)
const options = ref<MentionOption[]>([
])
const senderRef=ref<InstanceType<typeof MentionSender>>()
function openCloseHeader() {
  if (!showHeaderFlog.value) {
    senderRef.value?.openHeader()
  }
  else {
    senderRef.value?.closeHeader()
  }
  showHeaderFlog.value = !showHeaderFlog.value
}
const doSubmit=()=>{
  emits('query',dto.value)
  dto.value={}
}
const uploader=ref<InstanceType<typeof FileUploadBatch>>()
const openFileUpload=()=>{
  uploader.value?.open(true)
}
const delFile=(furl:string)=>{
  if (dto.value.files){
    dto.value.files=dto.value.files.filter(s=>s!==furl)
  }
  if (dto.value?.files?.length==0){
    senderRef.value?.closeHeader()
  }
}
const onOk=(url:string)=>{
  //console.log('ok',url)
  senderRef.value?.openHeader()
  if (!dto.value.files){
    dto.value.files=[];
  }
  dto.value.files?.push(url)
  uploader.value?.open(false)
}
</script>

<template>
  <MentionSender ref="senderRef"
                 @submit="doSubmit"
                 v-model="dto.query" placeholder="" variant="updown"
                 :trigger-strings="['#']"
                 :options="options"
                 clearable :auto-size="{minRows: 1, maxRows: 3}" allow-speech >
    <template #prefix>
      <file-upload-batch ref="uploader" @ok="onOk"/>
      <div class="line5">
        <el-button @click="openFileUpload" round plain color="#626aef">
          <el-icon><Paperclip /></el-icon>
        </el-button>
      </div>
    </template>
    <template #header>
      <div class="img-toolbar">
        <div v-for="(f,i) in dto.files" :key="i">
          <FilesCard :name="f" showDelIcon @delete="delFile(f)" />
        </div>
      </div>
    </template>
  </MentionSender>
</template>

<style scoped lang="scss">
.sender_header{
  min-height: 200px;
  background-color: white;
}
.img-toolbar{
  display: flex;
  flex-direction: row;
  gap: 10px;
  padding: 10px;
}
</style>
